import {Component, ElementRef, HostListener, Input, OnInit, Renderer2} from '@angular/core';

export interface ActionPanelOptions {
  side?: string;
  minWidth?: string;
  minHeight?: string;
  background?: string;
}

@Component({
  selector: 'app-action-panel',
  templateUrl: './action-panel.component.html',
  styleUrls: ['./action-panel.component.scss']
})
export class ActionPanelComponent implements OnInit {

  @Input() panelOptions: ActionPanelOptions = {};

  // 默认配置(底部，白色背景)
  private defaultOptions: ActionPanelOptions = {
    side: 'bottom',
    minWidth: '304px',
    minHeight: '45px',
    background: '#FFF'
  };

  // 面板样式
  public styleOptions: any = {};

  constructor(private elRef: ElementRef,
              private renderer2: Renderer2) { }

  // 根据外部输入属性，改写默认配置
  ngOnInit(): void {
    this.defaultOptions = {
      ...this.defaultOptions,
      ...this.panelOptions
    };
    if (this.defaultOptions.side === 'right') {
      this.styleOptions = {
        left: 'auto',
        top: '0',
        height: '100%',
        minWidth: this.defaultOptions.minWidth
      };
    } else {
      this.styleOptions = {
        left: '0',
        top: 'auto',
        height: 'auto',
        width: '100%',
        minHeight: this.defaultOptions.minHeight
      };
    }
    this.styleOptions = {
      ...this.styleOptions,
      backgroundColor: this.defaultOptions.background
    };
  }

  // 显示面板
  showActionPanel() {
    this.renderer2.addClass(this.elRef.nativeElement, 'action-panel-show');
  }

  // 隐藏面板
  hideActionPanel() {
    this.renderer2.removeClass(this.elRef.nativeElement, 'action-panel-show');
  }

  // 触击遮罩层隐藏面板
  @HostListener('click', ['$event.target'])
  tapBackGround(target) {
    if (target === this.elRef.nativeElement) {
      this.hideActionPanel();
    }
  }

}
